<template>
  <div id="login">
    <div class="logo">
      <img src="../../img/my-img/user-logo-004.png" alt />
    </div>
    <img width="375" src="@/img/login-img/uugai.png" class="log" />

    <div class="form">
      <van-cell-group>
        <van-field
          v-model="phone"
          clearable
          label="手机号"
          placeholder="请输入手机号"
          maxlength="11"
          :error-message="errInfo"
        />
        <van-field
          v-model="password"
          :type="type?'password':'text'"
          :right-icon="type?'closed-eye':'eye-o'"
          label="密码"
          placeholder="请输入密码"
          @click-right-icon="chex"
        />
      </van-cell-group>
      <van-button @click="onSubmit" class="but" type="info" style="margin:20px 0 0;">立即登录</van-button>
      <van-button @click="goEnroll" plain class="but" type="info" style="margin:10px 0 0;">没有帐号？前往注册</van-button>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
import { Notify } from "vant";
import axios from "axios";
import { login } from "@/API/user.js";
import { Toast } from "vant";
export default {
  created() {},
  data() {
    return {
      phone: "14444444444",
      password: "111111",
      type: true,
      errInfo: ""
    };
  },
  methods: {
    chex() {
      this.type = !this.type;
    },
    onSubmit() {
      if (this.phone && this.password) {
        let reg = /^1[3-9][0-9]{9}$/;
        if (reg.test(this.phone)) {
          // this.$router.push('/index')
          Toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true, // 禁用背景点击
            loadingType: "spinner",
            message: "加载中..."
          });
          this.postLogin();
          // console.log(login)
        } else {
          this.errInfo = "手机格式错误";
        }
      } else {
        Dialog.alert({
          message: "请输入手机号和密码"
        });
      }
    },
    postLogin() {
      login({
        phone: this.phone,
        password: this.password
      })
        .then(res => {
          Toast.clear();
          console.log(res);
          if (res.code == 666) {
            let infos = res.data;
            this.$store.commit("updateLogin", true);
            this.$store.commit("updateToken", infos.token);
            this.$store.commit("updateUsername", infos.userId);
            this.$store.commit("updateuserInfo", infos);
            // console.log(this.$store.state);
            Notify({
              message: "登录成功",
              duration: 1000,
              background: "#66CCFF"
            });
            this.$router.push("/index");
          } else {
            Dialog.alert({
              message: "帐号或密码错误"
            });
          }
        })
        .catch(err => {
          Toast.clear();
          Notify({
            message: "网络错误",
            duration: 1000,
            background: "#66CCCC"
          });
        });
    },
    goEnroll() {
      this.$router.push("/Enroll");
    }
  },
  watch: {
    phone(value) {
      let reg = /^1[3-9][0-9]{9}$/;
      if (reg.test(this.phone)) {
        this.errInfo = "";
      } else {
        this.errInfo = "手机格式错误";
      }

      if (!value) {
        this.errInfo = "";
      }
    }
  }
};
</script>
<style lang="less" scoped>
#login {
  width: 100%;
  height: 100%;
  background: url("../../img/login-img/mohu.jpg") no-repeat center/cover;
  overflow: hidden;
  .log {
    width: 75%;
    position: fixed;
    top: 120px;
    left: 12.5%;
  }
  .logo {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .form {
    width: 92%;
    background-color: white;
    box-shadow: 0 3px 9px #cfcfcf;
    border-radius: 5px;
    margin: 200px auto;
    z-index: 1;
    position: relative;
    padding: 24px 16px;
    box-sizing: border-box;
    .but {
      width: 100%;
      border-radius: 6px;
    }
  }
}
</style>